<template>
    <div class="outContainer">
        <div class="titleBox">
            <div class="title">任务中心</div>
            <div class="navBox">
                <div v-for="(item,index) in navList" :key="index" class="navIn" :class="index == navIndex?'chooseNav':''" @click="chooseNav(index)">
                    <div class="nav">
                        {{ item }}
                        {{ index<2?'(1)':'' }}
                    </div>
                    <div class="navLine"></div>
                </div>
            </div>
        </div>
        <div class="doitBox">
            <div @click="chooseItemIndex(index)" v-for="(item,index) in list" class="line" :key="index" :class="index == chooseIndex?'choose':''"></div>
        </div>
        <div class="taskListOutBox">
            <el-carousel ref="taskList" arrow="always" :loop="false" :autoplay="false" indicator-position="none" @change="listChange" height="202px">
                <el-carousel-item v-for="(item,index) in list" :key="index">
                    <div class="taskListBox">
                        <div class="taskItemIn" :class="indexIn%2==0?'taskItemFirst':'taskItemSecond'"  v-for="(itemIn,indexIn) in item" :key="indexIn">
                            <div class="taskItem">
                                <div class="tastItemLeft">
                                    <div class="iconBox">
                                        <img class="taskIcon" src="../../../assets/icon/taskListBlueIcon.png" alt="" srcset="">
                                    </div>
                                    <div class="taskItemDesBox">
                                        <div class="taskTitle">{{ itemIn.title }}</div>
                                        <div class="taskDes">{{ itemIn.des }}</div>
                                    </div>
                                </div>
                                <div class="taskBtn">去审批</div>
                            </div>
                        </div>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>
<script>
export default {
    props:{
        list:Array
    },
    data(){
        return {
            navList:['未处理任务','已处理任务','查看全部'],
            navIndex:0,
            chooseIndex:0   
        }
    },
    mounted(){
        console.log(this.$refs.taskList)
    },
    methods:{
        chooseNav(index){
            if(index!=2){
                this.navIndex = index
            }
        },
        chooseItemIndex(index){
            this.chooseIndex = index
            this.$refs.taskList.setActiveItem(index)
        },
        init(){
            this.chooseIndex = 0
        },
        listChange(newIndex,oldIndex,){
            this.chooseIndex = newIndex
        }
    }
}
</script>
<style>
.taskListOutBox .el-carousel__arrow--right{
    right: 0;
}
.taskListOutBox .el-carousel__arrow--left{
    left: 0;
}
</style>
<style scoped>
.taskListOutBox{
    height: 202px;
}
.taskListBox{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.taskItemIn{
    width: 50%;
}
.taskItemSecond{
    padding-left: 12.5px;
}
.taskItemFirst{
    padding-right: 12.5px;
}
.taskItem{
    height: 89px;
    border-radius: 6px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    padding: 0 20px;
}
.tastItemLeft{
    display: flex;
    align-items: center;
    flex: 1;
    overflow: hidden;
}
.iconBox{
    width: 49px;
    margin-right: 16px;
    user-select: none;
    height: 49px;
    background: rgba(76, 120, 255, 0.2);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.taskIcon{
    width: 18px;
    height: 21px;
}
.taskItemDesBox{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 65%;
    overflow: hidden;
}
.taskTitle{
    font-size: 14px;
    line-height: 22px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(0, 0, 0, 0.85);
}
.taskDes{
    font-size: 12px;
    line-height: 20px;
    margin-top: 4px;
    color: rgba(0, 0, 0, 0.45);
}
.taskBtn{
    font-size: 12px;
    line-height: 20px;
    color: #4C78FF;
    cursor: pointer;
}
.titleBox{
    display: flex;
    align-items: center;
}
.navBox{
    display: flex;
    align-items: center;
}
.title{
    font-size: 20px;
    line-height: 48px;
    margin-right: 48px;
    font-weight: 500;
    color: #596992;
}
.navIn{
    cursor: pointer;
    margin-right: 40px;
}
.nav{
    line-height: 22px;
    margin-bottom: 6px;
    padding-top: 8px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.45);
}
.navLine{
    height: 2px;
}
.chooseNav .nav{
    color: #4C78FF;
}
.chooseNav .navLine{
    background: #4C78FF;
}
.doitBox{
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
.line{
    height: 4px;
    border-radius: 2px;
    background: rgba(135, 135, 135, 0.22);
    width: 24px;
    margin-left: 6px;
    cursor: pointer;
}
.choose{
    width:48px;
    /* transition: all 1s; */
    background: #4C78FF;
}

</style>
